<!--
 * @Description: 
 * @Autor: Zhongyu
 * @Date: 2021-03-15 09:08:12
 * @LastEditors: Zhongyu
 * @LastEditTime: 2021-03-18 10:07:39
-->

<template>
	<div id="home" class="home">
		<div class="home-head">
			<fieldset class="home-head-fieldset">
				<legend>数据统计</legend>
				<el-row :gutter="20">
					<el-col :span="6" v-for="(item, i) in headDatas" :key="i">
						<div class="grid-content">
							<div class="chart-header">
								<div class="metawrap">
									<div class="meta">
										<span>{{ item.title }}</span>
									</div>
									<div class="total">{{ item.count }}</div>
								</div>
							</div>
							<div class="chart-footer">
								<div class="field">
									<span>{{ item.time }}</span>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</fieldset>
		</div>
		<div class="home-body">
			<fieldset class="home-body-fieldset home-body-left">
				<legend>登陆日志</legend>
				<ul class="logs-ui">
					<li class="logs-li" v-for="i in 9" :key="i">
						您的账号将于2020-11-23 10:21:33登陆于ip:10.80.23.12上，登陆地点未知
					</li>
				</ul>
			</fieldset>
			<fieldset class="home-body-fieldset home-body-right">
				<legend>账号统计</legend>
				<el-table :data="tableDatas">
					<el-table-column
						prop="nick_name"
						label="用户昵称"
						align="center"
					></el-table-column>
					<el-table-column
						prop="last_login_time"
						label="最后登陆时间"
						align="center"
					></el-table-column>
					<el-table-column
						prop="login_number"
						label="登陆次数"
						align="center"
					></el-table-column>
				</el-table>
			</fieldset>
		</div>
	</div>
</template>

<script>
import { NumFormat, DateFormat } from '../../utils/format';
export default {
	components: {},
	data() {
		let current_time = DateFormat(new Date());
		return {
			headDatas: [
				{
					title: '总用户数',
					count: NumFormat(126560),
					time: current_time,
				},
				{
					title: '总用户数',
					count: NumFormat(126560),
					time: current_time,
				},
				{
					title: '总用户数',
					count: NumFormat(126560),
					time: current_time,
				},
				{
					title: '总用户数',
					count: NumFormat(126560),
					time: current_time,
				},
			],
			tableDatas: [
				{
					nick_name: 'admin',
					last_login_time: '2021-03-16 10:22:32',
					login_number: 132,
				},
				{
					nick_name: '张三',
					last_login_time: '2021-03-16 09:52:20',
					login_number: 87,
				},
				{
					nick_name: '李四',
					last_login_time: '2021-03-06 21:22:32',
					login_number: 21,
				},
				{
					nick_name: '旺达',
					last_login_time: '2021-02-16 11:22:32',
					login_number: 33,
				},
				{
					nick_name: '胖达',
					last_login_time: '2021-02-10 11:22:32',
					login_number: 43,
				},
				{
					nick_name: '胖达',
					last_login_time: '2021-02-10 11:22:32',
					login_number: 43,
				},
				{
					nick_name: '胖达',
					last_login_time: '2021-02-10 11:22:32',
					login_number: 43,
				},
			],
		};
	},
	created() {
		this.$store.dispatch('breadcrumbDataActions', []);
	},
	mounted() {},
};
</script>

<style lang="less" src="./index.less"></style>
